<template>
	<wsPage :title="$t('Operation.BusinessInfo')">
		<wsPanel>
			<template slot="panel_head_title">{{$t('Operation.BusinessInfoSettings')}}
				<Button type="primary" @click="incompleteMerchant()"    v-if="incompleteshow">补全商户申请信息</Button>
				</template>
			<div slot="panel_body" class="ws-form-div">
				<div class="ws-form-div-form">
					<Form ref="form" :model="form.model" :label-width="150">
						<!-- 店铺名称 -->
						<FormItem :label="$t('Operation.StoreName')" required>
							<span v-show="form.changeEvent.change4">
								<Input v-model="form.model.storeName">
									<span slot="append">
										<span style="cursor: pointer;padding-right: 15px;" title="保存" @click="submitStoreName"><Icon type="checkmark"></Icon></span>
										<span style="cursor: pointer;" title="取消" @click="cancelStoreName"><Icon type="close"></Icon></span>
									</span>
								</Input>
							</span>
							<span v-show="!form.changeEvent.change4">{{form.model.storeName}}<span style="cursor: pointer;" title="修改" @click="changeStoreName"><Icon type="edit"></Icon></span></span>
						</FormItem>

						<!-- 交易货币 -->
						<FormItem :label="$t('Operation.TransactionCurrency')" required>
							<span>{{form.basic.currencySymbol}}</span>
						</FormItem>
						<!-- 掌柜名称 -->	
						<FormItem :label="$t('Operation.shopkeeper')" required>
							<span v-show="form.changeEvent.change1">
								<Input v-model="form.model.shopKeeper">
									<span slot="append">
										<span style="cursor: pointer;padding-right: 15px;" title="保存" @click="submitShopKeeper"><Icon type="checkmark"></Icon></span>
										<span style="cursor: pointer;" title="取消" @click="cancelShopKeeper"><Icon type="close"></Icon></span>
									</span>
								</Input>
							</span>
							<span v-show="!form.changeEvent.change1">{{form.basic.shopKeeper}}<span style="cursor: pointer;" title="修改" @click="changeShopKeeper"><Icon type="edit"></Icon></span></span>
						</FormItem>
						<!-- 客服支持语言 -->
						<FormItem :label="$t('Operation.CustomerSupportLanguage')" required>
							<Button @click="showKefuModal">{{$t('Operation.Setting')}}</Button>
							<ul>
								<li v-for="item in fields.supportLanguages">
									<!-- <span v-html="tparse(item.icon)"></span> -->
									{{item.motherTongue}}/{{item.english}}
								</li>
							</ul>
						</FormItem>
						<!-- 店铺logo -->
						<FormItem :label="$t('Operation.shopLogo')" required>
							<ws-upload-cos ref="upload" catelog="merchants" :cfile-key="form.model.logoImgUrl" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="logoUploadSuccess" style="display: inline-block;width:80px;">
								<div style="cursor: pointer;width: 80px;height:80px;line-height: 80px;border: 1px solid #ccc;text-align:center;">
									<Icon type="camera" size="20" v-if="form.model.logoImgUrl == ''"></Icon>
									<img :src="form.model.logoImgUrl" width="80" height="80" v-if="form.model.logoImgUrl != ''">
								</div>
							</ws-upload-cos>
							<div><span>{{$t('Operation.PictureSpecification')}}</span></div>
						</FormItem>
						<!-- 店铺背景图 -->
						<FormItem :label="$t('Operation.shopBackgroundPic')" required>
							<ws-upload-cos ref="upload" catelog="merchants" :cfile-key="form.model.bgImgUrl" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="bgUploadSuccess" style="display: inline-block;width:350px;">
								<div style="cursor: pointer;width: 350px;height:180px;line-height: 180px;border: 1px solid #ccc;text-align:center;">
									<Icon type="camera" size="20" v-if="form.model.bgImgUrl == ''"></Icon>
									<img :src="form.model.bgImgUrl" width="350" height="180" v-if="form.model.bgImgUrl != ''">
								</div>
							</ws-upload-cos>
							<div><span>{{$t('Operation.PictureSpecification')}}</span></div>
						</FormItem>
						<!-- 店铺简介 -->
						<FormItem :label="$t('Operation.StoreProfile')" required>
							<Button @click="showTranslateModal()">{{$t('Operation.Setting')}}</Button>
							<div v-text="form.basic.wDesc"></div>
						</FormItem>
						<!-- 宣传视频 -->
						<FormItem :label="$t('Operation.PromotionalVideo')" required>
							<span v-show="form.changeEvent.change3">
								<Input v-model="form.model.videoUrl">
									<span slot="append">
										<span style="cursor: pointer;padding-right: 15px;" title="保存" @click="submitViedoConfig"><Icon type="checkmark"></Icon></span>
										<span style="cursor: pointer;" title="取消" @click="cancelViedoConfig"><Icon type="close"></Icon></span>
									</span>
								</Input>
							</span>
							<span v-show="!form.changeEvent.change3"><Button @click="changeViedoConfig">{{$t('Operation.Setting')}}</Button></span>
							<d-player :options="player.options" ref="player"></d-player>
						</FormItem>
					</Form>
				</div>
			</div>
		</wsPanel>

		<!--设置语言的弹框-->
		<wsModal v-model="modal1.show" :ok-text="$t('Operation.save')" :cancelText="$t('Operation.Cancel')"  :title="$t('Operation.setSupportLanguage')" @on-ok="modal1Save" @on-cancel="modal1Cancel">
			<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
				<!-- <Checkbox :indeterminate="modal1.indeterminate" :value="modal1.checkAll" @click.prevent.native="handleCheckAll">{{$t('Operation.selectall')}}</Checkbox> -->
			</div>
			<!-- <CheckboxGroup v-model="modal1.checkAllGroup" @on-change="checkAllGroupChange">
				<Checkbox :value="item.code" :label="item.code" v-for="(item,index) in fields.languages" :key="index">
					{{item.motherTongue}}/{{item.english}}
				</Checkbox>
			</CheckboxGroup> -->
			 <RadioGroup v-model="modal1.checkAllGroup" @on-change="checkAllGroupChange">
				<Radio :value="item.code" :label="item.code" v-for="(item,index) in fields.languages" :key="index">
					{{item.motherTongue}}/{{item.english}}
				</Radio>
			</RadioGroup>
		</wsModal>

		<!--店铺翻译弹框-->
		<wsModal v-model="modal2.show" hideFooter :title="$t('Operation.storeTransList')" :width="600" >
			<wsSmPanel>
				<div slot="list_operate">
					<Button type="ghost" @click="showAddTranslateModal()">{{$t('Operation.newLanguage')}}</Button>
				</div>
				<div slot="list_data">
					<ws-table :data="modal2.table.datas" style="width: 100%">
						<ws-table-column align="center" :label="$t('Operation.language')">
							<template slot-scope="scope">
								<Tag color="blue" v-if="scope.row.dft == 1">{{scope.row.motherTongue}}/{{scope.row.english}}</Tag>
								<Tag v-if="scope.row.dft == 0">{{scope.row.motherTongue}}/{{scope.row.english}}</Tag>
							</template>	
						</ws-table-column>
						<ws-table-column align="center" prop="wDesc" :label="$t('Operation.storeDescription')" show-overflow-tooltip></ws-table-column>
						<ws-table-column align="center" width="160" :label="$t('Operation.operating')">
							<template slot-scope="scope">
								<!--<Button type="text" size="small" @click="showEditModal2(scope.row)" v-if="scope.row.dft == 1">默认</Button>-->
								<Button type="text" size="small" @click="showEditModal2(scope.row)">{{$t('Operation.modify')}}</Button>
								<Button type="text" size="small" @click="delModal2Confirm(scope.row)" v-if="scope.row.dft == 0">{{$t('Operation.Delete')}}</Button>
							</template>
						</ws-table-column>
					</ws-table>
				</div>
			</wsSmPanel>
		</wsModal>

		<!--修改属性弹框-->
		<wsModal v-model="modal3.show" :title="modal3.title" :width="600" @on-ok="saveModal3" @on-cancel="cancelModal3" :ok-text="$t('Operation.save')" :cancelText="$t('Operation.Cancel')">
			<Form ref="modal3.model" :model="modal3.model" :rules="modal3.rules" :label-width="100">
				<FormItem v-if = "!modal3.edit.modal" :label="$t('Operation.language')" prop="languageCode">
					<Select v-model="modal3.model.languageCode">
						<Option v-for="item in modal3.fields.languages" :value="item.code" :key="item.code">{{ item.motherTongue }}</Option>
					</Select>
				</FormItem>
				<FormItem :label="$t('Operation.language')" prop="languageCode" v-if="modal3.edit.modal" required>
					<span>{{modal3.model.motherTongue}}/{{modal3.model.english}}</span>
				</FormItem>
				<FormItem :label="$t('Operation.description')" prop="wDesc">
					<Input v-model="modal3.model.wDesc" type="textarea" :rows="6" />
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	import twemoji from 'twemoji';
	import VueDPlayer from 'vue-dplayer';
	import 'vue-dplayer/dist/vue-dplayer.css';
	export default {
		components: {
			'd-player': VueDPlayer
		},
		data() {
			return {
				incompleteshow:false,
				show1: false,
				show2: true,
				languageList: [],
				modal2: {
					show: false,
					table: {
						datas: []
					}
				},
				modal3: {
					show: false,
					title: '',
					model: {
						motherTongue: '',
						english: '',
						languageCode: '',
						wDesc: ''
					},
					rules:{
						languageCode: [
							{ required: true, message: '语言类型必选'}
						],
						wDesc: [
							{ required: true, message: '店铺描述必须输入', trigger: 'blur'}
						]
					},
					fields: {
						languages: []
					},
					edit: {
						row: null,
						modal: false //是否为编辑状态
					}
				},
				form: {
					basic: {
						shop: '',
						storeName: '',
						currencySymbol: '',
						currencyName: '',
						wDesc: '',
						motherTongue: '',
						english: '',
						shopKeeper: ''
					},
					model: {
						storeName: '',
						shopKeeper: '',
						logoImgUrl: '',
						bgImgUrl: '',
						videoUrl: ''
					},
					changeEvent: {
						change1: false,
						change2: false,
						change3: false,
						change4: false
					}
				},
				fields: {
					supportLanguages: [], //客服支持的语言列表
					languages: []
				},
				modal1: {
					show: false,
					indeterminate: true,
					checkAll: false,
					checkAllGroup: []
				},
				player: {
					options: {
						video: {
							url: '',
							pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
						},
						autoplay: false,
						contextmenu: [{
							text: 'GitHub',
							link: 'https://github.com/MoePlayer/vue-dplayer'
						}]
					}
				}
			}
		},
		computed: {
	
		},
		mounted() {
			this.init();
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			console.log(getCurrentLanguage);
			// console.log(this.$i18n.messages);
			this.$i18n.locale=getCurrentLanguage;

			if(this.$i18n.locale=='en'){
				this.modal3.rules={
						languageCode: [
							{ required: true, message: 'Language type required'}
						],
						wDesc: [
							{ required: true, message: 'Store description must be entered', trigger: 'blur'}
						]
					}
			}else if(this.$i18n.locale=='it'){
				this.modal3.rules={
						languageCode: [
							{ required: true, message: 'Tipo di lingua richiesto'}
						],
						wDesc: [
							{ required: true, message: 'La descrizione del negozio deve essere inserita', trigger: 'blur'}
						]
					}
			}
		},
		methods: {
			init() {
				this.query();
				this.supportLanguage();
				this.queryMerchantApplyStatus();
			},
			/**
			 * 店铺客服支持的语言
			 */
			queryMerchantApplyStatus() {
				let _this = this;
				this.axios.get("/ws/ms/applyStatus").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					let applyStatus = res.data;
					if(0 == resMeta.code) {
						if(applyStatus==4){
							_this.incompleteshow=true;
						}
						
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			
			/**
			 * 跳转到补全商户申请入驻信息页面
			 */
			incompleteMerchant() {
				this.$router.push({path: '/incompletemerchants'});
			},
			
			/**
			 * 店铺客服支持的语言
			 */
			supportLanguage() {
				let _this = this;
				this.axios.get("/ws/ms/supportlanguages").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.fields.supportLanguages = res.data;
						_this.modal1.checkAllGroup = res.data[0].languageCode;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 表单查询
			 */
			query() {
				const _this = this;
				this.axios.get('/ws/v2/ms/merchant/current').then(response => {
					var res = response.data;
					console.log(res);
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表单数据
			 */
			buildData(data) {
				this.form.basic.shop = data.shop;
				this.form.basic.currencySymbol = data.currencySymbol;
				this.form.basic.currencyName = data.currencyName;
				this.form.basic.wDesc = data.wDesc;
				this.form.basic.motherTongue = data.motherTongue;
				this.form.basic.english = data.english;
				this.form.basic.shopKeeper = data.shopkeeper;
				this.form.model.storeName=data.shop;

				this.form.model.logoImgUrl = data.logoImgUrl;
				this.form.model.bgImgUrl = data.bgImgUrl;
				this.form.model.videoUrl = data.videoUrl;
				this.play();
			},
			/**
			 * 修改掌柜名称
			 */
			changeShopKeeper() {
				this.form.model.shopKeeper = this.form.basic.shopKeeper;
				this.form.changeEvent.change1 = true;
			},

			changeStoreName() {
				this.form.model.storeName = this.form.model.storeName;
				this.form.changeEvent.change4 = true;
			},

			chanageShop(){
				this.form.model.shop = this.form.basic.shop;
				this.form.changeEvent.change1 = true;
			},
			
			/**
			 * 提交修改店铺名称
			 */
				submitShop() {
				let shop_ = this.form.model.shop;
				const _this = this;
				if(Util.vad.isBlank(shop_)) {
					if(_this.$i18n.locale=='zh'){
						_this.$Message.info('请输入店铺名称');
					}else if(_this.$i18n.locale=='en'){
						_this.$Message.info('Please enter the name of the shopkeeper');
					}else if(_this.$i18n.locale=='it'){
						_this.$Message.info('Si prega di inserire il nome del negoziante');
					}
					
					return;
				}
				this.sbumitMerchantUpdate({
					shopKeeper: shop_
				}, '修改店铺名称成功', function() {
					_this.form.basic.shop = _this.form.model.shop;
					_this.cancelShopKeeper();
				});
			},
			/**
			 * 提交修改掌柜名称
			 */
			submitShopKeeper() {
				let shopKeeper_ = this.form.model.shopKeeper;
				const _this = this;
				if(Util.vad.isBlank(shopKeeper_)) {
					if(_this.$i18n.locale=='zh'){
						_this.$Message.info('请输入掌柜名称');
					}else if(_this.$i18n.locale=='en'){
						_this.$Message.info('Please enter the name of the shopkeeper');
					}else if(_this.$i18n.locale=='it'){
						_this.$Message.info('Si prega di inserire il nome del negoziante');
					}
					
					return;
				}
				this.sbumitMerchantUpdate({
					shopKeeper: shopKeeper_
				}, '修改掌柜名称成功', function() {
					_this.form.basic.shopKeeper = _this.form.model.shopKeeper;
					_this.cancelShopKeeper();
				});
			},
			/**
			 * 取消修改掌柜名称
			 */
			cancelShopKeeper() {
				this.form.changeEvent.change1 = false;
			},

			cancelStoreName() {
				this.form.changeEvent.change4 = false;
			},

			/**提交修改店铺名称 */
			submitStoreName(){
				let shopName = this.form.model.storeName;
				const _this = this;
				if(Util.vad.isBlank(shopName)) {
					if(_this.$i18n.locale=='zh'){
						_this.$Message.info('请输入店铺名称');
					}else if(_this.$i18n.locale=='en'){
						_this.$Message.info('Please enter the name of the storename');
					}else if(_this.$i18n.locale=='it'){
						_this.$Message.info('Si prega di inserire il nome del negoziante');
					}
					
					return;
				}


				this.axios.put('/ws/ms/merchantApi/'+shopName).then(function(response) {  
					let res = response.data;
					console.log(res);
					if(0 === res.meta.code) {
						_this.form.model.storeName=shopName;
						_this.form.basic.storeName = shopName;

						_this.cancelStoreName();

					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('修改失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('fail to edit:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Modifica fallita:' + message_);
						}
						
					}
					_this.init();
				});
				// this.sbumitMerchantUpdate({
				// 	storeName: storeName_
				// }, '修改店铺名称成功', function() {
				// 	_this.form.basic.storeName = _this.form.model.storeName;
				// 	_this.cancelStoreName();
				// });
			},
				/**
			 * 取消修改店铺名称
			 */
			cancelStoreName() {
				this.form.changeEvent.change4 = false;
			},
			changeViedoConfig() {
				this.form.changeEvent.change3 = true;
			},
			cancelViedoConfig() {
				this.form.changeEvent.change3 = false;
			},
			/**
			 * 提交视频编辑配置
			 */
			submitViedoConfig() {
				let videoUrl_ = this.form.model.videoUrl;
				const _this = this;
				if(Util.vad.isBlank(videoUrl_)) {
					if(_this.$i18n.locale=='zh'){
						_this.$Message.info('请输入视频地址');
					}else if(_this.$i18n.locale=='en'){
						_this.$Message.info('Please enter a video address');
					}else if(_this.$i18n.locale=='it'){
						_this.$Message.info('Si prega di inserire un indirizzo video');
					}
					
					return;
				}
				this.sbumitMerchantUpdate({
					videoUrl: videoUrl_
				}, '修改宣传视频成功', function() {
					_this.cancelViedoConfig();
					_this.play();
				});
			},
			/**
			 * 提交修改
			 */
			submit() {
				const _this = this;
				let postData_ = this.form.model;
				this.axios.put('/ws/ms/merchant', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('修改失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('fail to edit:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Modifica fallita:' + message_);
						}
						
					}
					_this.init();
				});
			},
			/**
			 * LOGO上传成功
			 */
			logoUploadSuccess(response, file, fileList) {
				if(0 == response.meta.code) {
					let logoUrl = response.data.pubFileUrl;
					this.form.model.logoImgUrl = logoUrl;
					this.sbumitMerchantUpdate({
						logoImgUrl: logoUrl
					}, '修改LOGO成功');
				}
			},
			/**
			 * 修改商户背景图
			 */
			bgUploadSuccess(response, file, fileList) {
				if(0 == response.meta.code) {
					let bgImgUrl = response.data.pubFileUrl;
					this.form.model.bgImgUrl = bgImgUrl;
					this.sbumitMerchantUpdate({
						bgImgUrl: bgImgUrl
					}, '修改背景图成功');
				}
			},
			/**
			 * 执行商户修改操作
			 */
			sbumitMerchantUpdate(postData_, successMsg, callback) {
				const _this = this;
				this.axios.put('/ws/ms/merchant', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(successMsg);
						callback();
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('修改失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('fail to edit:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Modifica fallita:' + message_);
						}
						
					}
					_this.init();
				});
			},
			play() {
				let _this = this;
				this.$refs.player.dp.switchVideo({
					url: _this.form.model.videoUrl
				});
				this.$refs.player.dp.play();
			},
			/**
			 * 显示客服支持的语言类型
			 */
			showKefuModal() {
				let _this = this;
				this.axios.get("/ws/ops/v2/languages").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildKefuModal(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			buildKefuModal(data) {
				console.log(data);
				this.fields.languages = data;
				let supportLanguages = this.fields.supportLanguages;
				
				// this.modal1.checkAllGroup = [];
				// for(let i = 0; i < supportLanguages.length; i++) {
				// 	this.modal1.checkAllGroup.push(supportLanguages[i].languageCode);
				// }
				this.modal1.show = true;
			},
			/**
			 * 选中语言
			 */
			checkAllGroupChange(data) {
				if(data.length === this.fields.languages.length) {
					this.modal1.indeterminate = false;
					this.modal1.checkAll = true;
				} else if(data.length == 0) {
					this.modal1.indeterminate = false;
					this.modal1.checkAll = false;
				} else {
					this.modal1.indeterminate = true;
					this.modal1.checkAll = false;
				}
			},
			handleCheckAll() {
				if(this.modal1.indeterminate) {
					this.modal1.checkAll = false;
				} else {
					this.modal1.checkAll = !this.modal1.checkAll;
				}
				this.modal1.indeterminate = false;

				if(this.modal1.checkAll) {
					let languages = this.fields.languages;
					this.modal1.checkAllGroup = [];
					for(let i = 0; i < languages.length; i++) {
						this.modal1.checkAllGroup.push(languages[i].code);
					}
				} else {
					this.modal1.checkAllGroup = [];
				}
			},
			/**
			 * 更新客服支持的语言
			 */
			modal1Save() {
				const _this = this;
				let languageList = this.modal1.checkAllGroup;
				if(languageList.length == 0) {
					if(_this.$i18n.locale=='zh'){
						this.$Message.info('请至少设置一种支持的语言类型');
					}else if(_this.$i18n.locale=='en'){
						this.$Message.info('Please set at least one supported language type');
					}else if(_this.$i18n.locale=='it'){
						this.$Message.info('Si prega di impostare almeno un tipo di lingua supportato');
					}
					
					return;
				}
				this.sbumitMerchantUpdate({
					languageList: languageList
				}, '修改客服支持语言成功', function() {
					_this.modal1Cancel();
					_this.query();
				});
			},
			modal1Cancel() {
				this.modal1.show = false;
			},
			/**
			 * 显示店铺描述翻译
			 */
			showTranslateModal() {
				const _this = this;
				this.axios.get('/ws/ms/v2/merchant/translates').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.modal2.table.datas = res.data;
						_this.modal2.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 显示模态框2的编辑页面
			 */
			showEditModal2(row_) {
				const _this = this;
				let languageCode = row_.languageCode;
				this.axios.get("/ws/ms/v2/merchant/translates/" + languageCode).then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.handEditModal2Data(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			handEditModal2Data(data) {
				const _this = this;
				this.initTranslateLanguage(function() {
					_this.buildEditModal2Data(data);
					_this.modal3.show = true;
					_this.modal3.edit.modal = true;
					
					if(_this.$i18n.locale=='en'){
						_this.modal3.title = 'Add store description translation';
					}else if(_this.$i18n.locale=='zh'){
						_this.modal3.title = '修改店铺描述翻译';
					}else if(_this.$i18n.locale=='it'){
						_this.modal3.title = 'Modifica la traduzione della descrizione del negozio';
					}

				});
			},
			buildEditModal2Data(data) {
				this.modal3.model.motherTongue = data.motherTongue;
				this.modal3.model.english = data.english;
				this.modal3.model.languageCode = data.languageCode;
				this.modal3.model.wDesc = data.wDesc;
			},
			/**
			 * 删除模态框2行的确认
			 */
			delModal2Confirm(row_) {
				const _this = this;
				if(_this.$i18n.locale=='zh'){
					this.$confirm({
						title: "操作提示",
						width: 300,
						content: "你确认删除当前选中的店铺描述翻译吗?",
						onOk: function() {
							_this.submitDelTranslate(row_);
						}
					});
				}else if(_this.$i18n.locale=='en'){
					this.$confirm({
						title: "Alert",
						width: 300,
						content: "Delete the currently selected store description translation?",
						onOk: function() {
							_this.submitDelTranslate(row_);
						}
					});
				}else if(_this.$i18n.locale=='it'){
					this.$confirm({
						title: "Operazione richiesta",
						width: 300,
						content: "Eliminare la traduzione della descrizione del negozio attualmente selezionata?",
						onOk: function() {
							_this.submitDelTranslate(row_);
						}
					});
				}
				
			},
			submitDelTranslate(row_) {
				const _this = this;
				let languageCode = row_.languageCode;
				this.axios
					.delete("/ws/ms/v2/merchant/translate/" + languageCode).then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.showTranslateModal();
							if(_this.$i18n.locale=='zh'){
								_this.$Message.success('删除商品翻译成功');
							}else if(_this.$i18n.locale=='en'){
								_this.$Message.success('Deleted product translation successfully');
							}else if(_this.$i18n.locale=='it'){
								_this.$Message.success('Traduzione di prodotti eliminata con successo');
							}
							
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 显示添加店铺描述翻译的模态框
			 */
			showAddTranslateModal() {
				const _this = this;
				this.initTranslateLanguage(function() {
					_this.modal3.show = true;
					_this.modal3.edit.modal = false;

					if(_this.$i18n.locale=='en'){
						_this.modal3.title = 'Add store description translation';
					}else if(_this.$i18n.locale=='zh'){
						_this.modal3.title = '修改店铺描述翻译';
					}else if(_this.$i18n.locale=='it'){
						_this.modal3.title = 'Modifica la traduzione della descrizione del negozio';
					}
				});				
			},
			/**
			 * 初始化可以翻译语言
			 */
			initTranslateLanguage(callback) {
				if(this.modal3.fields.languages.length > 0) {
					callback();
					return;
				}
				const _this = this;
				this.axios
					.get("/ws/ops/v2/languages/translatable").then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.modal3.fields.languages = res.data;
							callback();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 保存模态框3
			 */
			saveModal3() {
				this.$refs['modal3.model'].validate((valid) => {
					if (valid) {
						this.modal3SaveOK();
                    } else {
                    	console.log(valid);
                    }
                });
			},
			/**
			 * 保存店铺翻译
			 */
			modal3SaveOK() {
				if(this.modal3.edit.modal) {
					//编辑
					this.submitUpdateModal3();
				} else {
					//新增
					this.submitNewModal3();
				}
			},
			submitNewModal3() {
				let postData_ = this.modal3.model;
				const _this = this;
				this.axios.post('/ws/ms/v2/merchant/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						if(_this.$i18n.locale=='zh'){
							_this.$Message.success('新增店铺翻译成功');
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.success('Added store translation success');
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success('Aggiunto successo nella traduzione del negozio');
						}
						
						_this.cancelModal3();
						_this.showTranslateModal();
						_this.query();
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('新增店铺翻译失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Added store translation failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Aggiunta traduzione del negozio non riuscita:' + message_);
						}
						
					}
				});
			},
			submitUpdateModal3() {
				let postData_ = this.modal3.model;
				const _this = this;
				this.axios.put('/ws/ms/v2/merchant/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						if(_this.$i18n.locale=='zh'){
							_this.$Message.success('修改店铺翻译成功');
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.success('Modify store translation successfully');
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success('Modifica la traduzione negozio con successo');
						}
						_this.query();
						_this.cancelModal3();
						_this.showTranslateModal();
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('修改店铺翻译失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Modify shop translation failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Modifica traduzione negozio fallita:' + message_);
						}
						
					}
				});
			},
			cancelModal3() {
				this.modal3.model.languageCode = '';
				this.modal3.model.wDesc = '';
				this.$refs['modal3.model'].resetFields();
				this.modal3.show = false;
			},
			/**
			 * 格式化
			 */
			tparse(str) {
				return twemoji.parse(str);
			}			
		}
	}
</script>

<style>
	img.emoji {
	    width: 2em !important;
	    height: 2em !important;
	}
</style>